<template>
	<view class="managementBox">
		<view>
			<image src="../../static/integral/integralTop.png" style="width: 100%; height: 360rpx;"></image>
		</view>
		<uni-nav-bar height="88rpx" fixed title="星汇商城" color="#fff" :border="false" left-icon="left"
			@clickLeft="$back" statusBar style="margin-top: -360rpx;" background-color="rgba(255, 255, 255, 0)" >
		</uni-nav-bar>
		
		<view class="top-title">
			<view>
				<image src="@/static/integral/integralIcon.png" style="width: 100rpx; height: 100rpx; margin-top: 6rpx;"></image>
			</view>
			<view style="margin-left: 24rpx; letter-spacing: 2rpx; margin-top: 4rpx;">
				<view style="font-weight: bold;">星汇优品·渝好空间</view>
				<view style="display: flex; align-items: center; margin-top: 16rpx;">
					<image src="@/static/integral/integralShopIcon.png" style="width: 30rpx; height: 30rpx;"></image>
					<view style="margin-left: 16rpx; font-size: 28rpx; color: #aaaeb3;">各种优品，等你来兑换</view>
				</view>
			</view>
		</view>
		
		<view class="contentBox">
			<view class="leftBox">
				<sidebar ref="sidebar" @change="sidebarChange"></sidebar>
			</view>
			<view class="rightBox">
				<mescroll-uni ref="mescrollRef" :fixed="false" :top="mescroll_top" @init="mescrollInit"
					@down="downCallback" :down="downOption" @up="upCallback" :up="upOption">
					<integralGoods ref="goods" @click="goodsItem"></integralGoods>
				</mescroll-uni>
			</view>
		</view>
		<!-- <tabBar selectedIndex="1"></tabBar> -->
	</view>
</template>

<script>
	import * as systemApi from "@/api/system.js"
	import * as goodsApi from "@/api/goods.js"
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				mescroll_top: '0',
				listObj: {
					search: '',
					commodityType: '',
					commodityStatus: 0
				},
				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					isLock: true,
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '--这里是底线--',
					empty: {
						tip: '暂无' // 提示
					}
				},
				dataList: {
					pageSize: 10,
					pageNum: 1,
					rows: [],
					total: 0
				},
				dicts: {
					commodity_type: {}
				}
			};
		},
		mounted() {
			const that = this
			// #ifdef MP
			uni.getSystemInfo({
				success: function(res) {
					that.mescroll_top = 88 + res.statusBarHeight * 2 + 'rpx'
				}
			})
			// #endif
		},
		async onLoad(options) {
			console.log(options);

		},
		onShow() {
			// this.getUserInfo()
			this.setSidebar()
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
				animation: false
			})

		},
		methods: {
			goodsItem(value) {
				console.log(value);
				this.$navTo('pages/integral/goodsInfo/goodsInfo', {
					id: value.commodityId
				})
			},
			sidebarChange(value) {
				this.listObj.commodityType = value
				this.downCallback()
			},
			async setSidebar() {
				await this.getDictDataList('commodity_type').then((res) => {
					console.log(res);
					this.$refs.sidebar.initData(res.keyValues)
					// this.$refs.sidebar.setIndex(this.listObj.commodityType)
					this.listObj.commodityType = res.keyValues[0].value
					this.$refs.sidebar.setIndex(this.listObj.commodityType)
					this.downCallback()
				})
			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			//手动刷新
			getData() {
				let curMescroll = this.$refs.mescrollItem[0].mescroll
				curMescroll && curMescroll.resetUpScroll()
				curMescroll && curMescroll.scrollTo(0, 0)
			},

			/*下拉刷新的回调 */
			downCallback(page) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const that = this
				if (that.$store.getters.token) {
					if (uni.getStorageSync('goods_Search')) {
						const goods_Search = JSON.parse(uni.getStorageSync('goods_Search'))
						that.listObj.search = goods_Search.search
					}
					this.getDataList({
						pageNum: page.num,
						pageSize: page.size,
						...that.listObj
					}).then(list => {
						const curPageLen = list.rows.length
						const totalSize = list.total
						that.mescroll.endBySize(curPageLen, totalSize)
					}).catch(err => {
						that.mescroll.endErr()
					})
				} else {
					that.mescroll.endBySize(0, 0)
					return
				}
			},
			/**
			 * @param {Object} page 页码
			 */
			getDataList(pageObj) {
				const that = this
				return new Promise((resolve, reject) => {
					goodsApi.commodityList(pageObj).then((data) => {
						let dataList = JSON.parse(JSON.stringify(that.dataList))
						dataList.pageSize = pageObj.pageSize
						dataList.pageNum = pageObj.pageNum
						dataList.total = data.total
						dataList.pages = Math.ceil(data.total / dataList.pageSize)
						// 合并新数据
						const newList = data.rows
						// 如果是第一页需手动制空列表
						if (pageObj.pageNum == 1) dataList.rows = []
						// 合并新数据
						dataList.rows = dataList.rows.concat(newList)
						that.dataList = dataList
						this.$refs.goods.initData(dataList)
						resolve(that.dataList)
					}).catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.managementBox {}

	.searchBox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.searchInput {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.contentBox {
		display: flex;
		align-items: flex-start;
		/* #ifdef H5 */
		height: calc(100vh - 88rpx);
		/* #endif */
		/* #ifndef H5 */
		height: calc(100vh);
		/* #endif */
		// padding-top: 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		margin-top: 18rpx;

		.leftBox {
			height: 100%;
			width: 204rpx;
			// background-color: #f7f7f7;
		}

		.rightBox {
			position: relative;
			width: calc(100vw - 204rpx);
			height: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 0);
		}
	}
	.top-title{
		display: flex;
		background-color: white;
		position: relative;
		z-index: 1;
		margin: 0 5%;
		border-radius: 16rpx;
		padding: 24rpx 24rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}
</style>